<template>
  <div>
    <mt-search placeholder="可以搜索标题、作者、标签哦!"></mt-search>
    <div class="hot-search-list">
      <h5>热门搜索 <span>换一换</span></h5>
      <div class="list">
        <span>人鱼陷落</span>
        <span>钟情</span>
        <span>垂耳执事</span>
        <span>卡比丘</span>
        <span>诟病</span>
        <span>美学公式</span>
        <span>破镜重圆</span>
        <span>我是一个在GAY吧打工的直男</span>
        <span>恶性依赖</span>
        <span>我们不是情敌吗</span>
      </div>
      <h5>搜索发现 <span>换一换</span></h5>
      <div class="search_books_list">
        <router-link to="/">
          <img src="books_fm/hongloumeng.jpg" alt="" />
          <p>孤岛相爱，人海重逢</p>
        </router-link>
        <router-link to="/">
          <img src="books_fm/hongloumeng.jpg" alt="" />
          <p>孤岛相爱，人海重逢</p>
        </router-link>
        <router-link to="/">
          <img src="books_fm/hongloumeng.jpg" alt="" />
          <p>孤岛相爱，人海重逢</p>
        </router-link>
        <router-link to="/">
          <img src="books_fm/hongloumeng.jpg" alt="" />
          <p>孤岛相爱，人海重逢</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
.mint-search {
  height: auto;
}
.mint-searchbar {
  background: transparent;
  .mint-searchbar-cancel{
    color: #505050;
    font-size: 0.8rem;
  }
  .mint-searchbar-inner {
    background: #f7f8fa;
    border-radius: 20px;
    padding: 0;
    .mintui-search {
      font-size: 1.2rem;
      color: #888;
      margin: 0 0.2rem 0 0.6rem;
    }
    .mint-searchbar-core {
      background: #f7f8fa;
      height: 1.5rem;
      width: 86%;
      font-size: 0.8rem;
    }
  }
}

.hot-search-list {
  padding: 0.9rem;
  h5 {
    font-weight: normal;
    span {
      float: right;
      color: #8f8f9e;
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    margin: 0.3rem 0 0.9rem;
    span {
      border-radius: 20px;
      background: #d3d3d333;
      display: initial;
      padding: 0.1rem 0.6rem;
      font-size: 0.8rem;
      margin: 0.3rem 0.5rem;
    }
  }
}
.search_books_list {
  padding: 0.9rem 0;
  a {
    background: #f7f8fa;
    display: flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.9rem;
    margin: 0.2rem 0 0.7rem 0;
    img{
      width: 10vw;
      height: 12.5vw;
      margin-right: 1rem;
    }
  }
}
</style>